import SPACETCOLLECTION from '@/assets/image/space-collection.png';
import SPACETFAVORITE from '@/assets/image/space-favorite.png';
import SPACETSREFERENCE from '@/assets/image/space-reference.png';
import SPACETSPEECH from '@/assets/image/space-speech.png';
import SPACETRUTH from '@/assets/image/space-truth.png';
import { SpaceType } from '@/types/spaceType';
import { connect } from '@umijs/max';
import React, { useEffect, useState } from 'react';
import './index.less';

const imgs: any = {
  speech: SPACETSPEECH,
  format: SPACETSREFERENCE,
  fact: SPACETRUTH,
  collection: SPACETCOLLECTION,
  good_sentence: SPACETSPEECH,
  good_article: SPACETFAVORITE,
};

const NavBar: React.FC<any> = (props: any) => {
  const { type, onChange } = props;

  // const [items, setItems] = useState([
  //   {
  //     img: SPACETRUTH,
  //     title: '行政局知识空间',
  //     type: SpaceType.SPACETRUTH,
  //     select: false,
  //   },
  //   {
  //     img: SPACETSPEECH,
  //     title: '重要讲话空间',
  //     type: SpaceType.SPACETSPEECH,
  //     select: false,
  //   },
  //   {
  //     img: SPACETSREFERENCE,
  //     title: '公文模板空间',
  //     type: SpaceType.SPACETSREFERENCE,
  //     select: false,
  //   },
  //   {
  //     img: SPACETFAVORITE,
  //     title: '好文收藏空间',
  //     type: SpaceType.SPACETFAVORITE,
  //     select: false,
  //   },
  //   {
  //     img: SPACETSENTENCES,
  //     title: '好词好句空间',
  //     type: SpaceType.SPACETSENTENCES,
  //     select: false,
  //   },
  //   {
  //     img: SPACETCOLLECTION,
  //     title: '定期收集空间',
  //     type: SpaceType.SPACETCOLLECTION,
  //     select: false,
  //   },
  // ]);

  const [items, setItems] = useState([]);

  const getSpaceMeta = async () => {
    const spaceTypes = props.spaceModel.cognitionTypes.map((type: any) => {
      return {
        id: type.id,
        img: imgs[type.name],
        title: type.frontend_mete_data.title,
        type: type.name as SpaceType,
        select: false,
      };
    });

    setItems(spaceTypes);
  };

  useEffect(() => {
    getSpaceMeta();
  }, []);

  useEffect(() => {
    if (items.length) {
      items.forEach((tab: any) => {
        tab.select = false;
        if (type === tab.type) {
          tab.select = true;
          setItems([...items]);
        }
      });
      //更新当前选中到对话框组件的公共model里
      props.dispatch({
        type: 'spaceBot/updateStateAsync',
        payload: {
          curTab: type,
        },
      });
    }
  }, [type]);

  const navSelect = (item: any) => {
    if (item.select) return;
    items.forEach((tab: any) => {
      tab.select = false;
    });
    item.select = true;
    setItems([...items]);
    onChange(item);
  };

  return (
    <div className="space-data-nav-warp">
      {items.map((item: any, index: number) => {
        return (
          <div
            key={index}
            className={'item' + ' ' + `${item.select ? 'select' : ''}`}
            onClick={() => navSelect(item)}
          >
            <img src={item.img} width={58} height={58} />
            <div className="title flex1">{item.title}</div>
            {item.select && <div className="sel-tap"></div>}
          </div>
        );
      })}
    </div>
  );
};
export default connect(({ spaceModel, spaceBot }) => ({ spaceModel, spaceBot }))(NavBar);
